import React from "react";
import DatePicker from "../../DatePicker";
import { getTimestamp } from "../utils";
import { useErrmsgStyles } from "./styles";

export default function DatePickerRangeComponent({
  start,
  end,
  picker,
  errmsg,
  disabled,
  onChange,
}: {
  start?: string | number;
  end?: string | number;
  picker: "date" | "datetime";
  errmsg?: string;
  disabled?: boolean;
  onChange: (v: [number?, number?]) => void;
}) {
  const classes = useErrmsgStyles();
  const S = getTimestamp(start),
    E = getTimestamp(end);

  const handler = (a?: number, b?: number) => onChange([a, b]);

  const cn = picker == "date" ? "date-width" : "datetime-width";

  return (
    <div>
      <DatePicker
        key={"DatePickerRangeComponentStart" + picker}
        picker={picker}
        onChange={(v) => handler(v?.valueOf(), E)}
        defaultValue={S}
        className={cn}
        disabled={disabled}
      />
      &nbsp; ~ &nbsp;
      <DatePicker
        key={"DatePickerRangeComponentEnd" + picker}
        picker={picker}
        onChange={(v) => handler(S, v?.valueOf())}
        defaultValue={E}
        className={cn}
        disabled={disabled}
      />
      {errmsg && <div className={classes.errmsg}>{errmsg}</div>}
    </div>
  );
}
